<template>
    <div ref="wrapper">
        <slot></slot>
    </div>
</template>

<script type="text/ecmascript-6">
    import BScroll from 'better-scroll'

    export default {
        props: {
            probeType: {
                type: Number,
                default: 1
            },
            click: {
                type: Boolean,
                default: true
            },
            listenScroll: {
                type: Boolean,
                default: false
            },
            data: {
                type: Array,
                default: null
            },
            pullup: {
                type: Boolean,
                default: false
            },
            beforeScroll: {
                type: Boolean,
                default: false
            },
            refreshDelay: {
                type: Number,
                default: 20
            },
            // 监听滚动状态控制播放器显示隐藏
            isSetPlayerStatus: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                pos: {x: 0, y: 0}
            }
        },
        mounted() {
            setTimeout(() => {
                this._initScroll()
            }, 20)
        },
        methods: {
            _initScroll() {
                if (!this.$refs.wrapper) {
                    return
                }
                this.scroll = new BScroll(this.$refs.wrapper, {
                    probeType: this.probeType,
                    click: this.click
                });

                if (this.listenScroll) {
                    let me = this;
                    this.scroll.on('scroll', (pos) => {
                        me.$emit('scroll', pos);
                        // 直接修改状态好了
                        if (this.isSetPlayerStatus) {
                            this.setPlayerStatus(pos);
                        }
                    })
                }

                if (this.pullup) {
                    this.scroll.on('scrollEnd', () => {
                        if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
                            this.$emit('scrollToEnd')
                        }
                    })
                }

                if (this.beforeScroll) {
                    this.scroll.on('beforeScrollStart', () => {
                        this.$emit('beforeScroll')
                    })
                }
            },
            disable() {
                this.scroll && this.scroll.disable()
            },
            enable() {
                this.scroll && this.scroll.enable()
            },
            refresh() {
                this.scroll && this.scroll.refresh()
            },
            scrollTo() {
                this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
            },
            scrollToElement() {
                this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
            },
            setPlayerStatus(pos) {
                // 向下滑动，pos.y 变小
                var is_up = (this.pos.y >= pos.y);
                // 显示与隐藏
                if (is_up === this.$store.state.isShowPlayer) {
                    this.$store.commit("setPlayerStatus", !is_up)
                }
                // 最新的停留位置
                this.pos = pos;
            }
        },
        watch: {
            data() {
                setTimeout(() => {
                    this.refresh()
                }, this.refreshDelay)
            }
        }
    }
</script>

<style>
</style>
